<template>
	<view class="loginbox bj_between">
		<view class="bj_between">
			<image src="/static/top/1.png" style="width: 32rpx;margin-right: 24rpx;" mode="widthFix" @click="opmu">
			</image>
			<image src="/static/top/2.png" style="width: 180rpx;" mode="widthFix"></image>
		</view>
		<view class="bj_between">
			<!--没登录-->
			<view class="logbtnbox" v-if="userInfo == null">
				<image src="/static/top/3.png" mode="widthFix"></image>
				<image src="/static/top/4.png" class="img2" mode="widthFix"></image>
				<view class="poa lt0 w100 h100 bj_between tc f22 cff">
					<view class="logbtn" @click="opgc(1,2)">
						{{$t("toptxt1")}}
					</view>
					<view class="logbtn" @click="opgc(2,2)">
						{{$t("toptxt2")}}
					</view>
				</view>
				<image src="/static/top/5.png" class="lhpic lhdh" mode="widthFix"></image>
			</view>

			<!--已登录-->
			<view class="userinfobox bj_between" v-if="userInfo != null">
				<view class="userinfobox-moneybox bj_between">
					<view class="userinfobox-moneybox-dwbox">
						{{$t("menu.$")}}
					</view>
					<NumVue ref="numv"></NumVue>
					<image src="/static/top/7.png" @click="tocz"
					class="userinfobox-moneybox-addbtn" mode="widthFix"></image>
				</view>
				<image src="/static/top/8.png" class="userinfobox-lwpic" mode="widthFix" @click="opgc(24,1)"></image>
			</view>
			<image src="/static/top/6.png" style="width: 60rpx;" mode="widthFix" @click="tokf"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		watch
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import useI18n from '@/store/useI18n.js'
	import NumVue from './Num.vue';
	const {
		t,
		changeLanguage
	} = useI18n()
	// 打开盖层
	const opgc = inject("opgc");
	let numv = ref(null)
	let userInfo = ref({})

	watch(() => getApp().globalData.userInfo, (val) => {
		userInfo.value = getApp().globalData.userInfo
		if (userInfo.value.user) {
			numv.value.startAnimation(userInfo.value.user.money);
		}
	})

	watch(() => getApp().globalData.userInfo.user, (val) => {
		userInfo.value = getApp().globalData.userInfo
		if (userInfo.value.user) {
			numv.value.startAnimation(userInfo.value.user.money);
		}
	})


	onShow(function() {
		userInfo.value = getApp().globalData.userInfo
		setTimeout(function() {
			if (userInfo.value.user) {
				numv.value.startAnimation(userInfo.value.user.money);
			}
		}, 1000)
	})

	function opmu() {
		if (userInfo.value == null) {
			opgc(0)
		} else {
			opgc(0)
		}
	}
	
	function tocz(){
		uni.navigateTo({
			url:"/pages/index/tx"
		})
	}

	function tokf() {
		window.open(getApp().globalData.config2.kfurl)
	}
</script>

<style scoped lang="scss">
	.loginbox {
		background: #00561D;
		height: 88rpx;
		position: sticky;
		left: 0;
		width: 100%;
		top: 0;
		z-index: 1001;
		padding: 0 36rpx 0 20rpx;

		.logbtnbox {
			position: relative;
			width: 282rpx;
			height: 60rpx;
			margin-right: 18rpx;

			image {
				width: 146rpx;
			}

			.img2 {
				position: absolute !important;
				top: 0;
				right: 0;
			}

			.logbtn {
				width: 136rpx;
			}
		}

		.userinfobox {
			font-size: 28rpx;

			&-moneybox {
				min-width: 190rpx;
				max-width: 290rpx;
				height: 52rpx;
				background: #003311;
				border-radius: 100rpx;
				border: 2rpx solid #003311;
				padding-left: 18rpx;
				margin-right: 16rpx;

				&-dwbox {
					width: 46rpx;
					font-weight: bold;
					font-style: normal;
					text-transform: none;
					background: linear-gradient(180deg, #00802B 0%, #06C045 100%);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
					border-right: 2rpx solid #06BA43;
				}

				&-addbtn {
					width: 40rpx;
				}
			}

			&-lwpic {
				width: 60rpx;
			}
		}

		.lhpic {
			width: 46rpx !important;
			position: absolute !important;
			top: -18rpx;
			right: -12rpx;
		}
	}
</style>